<template>
	<view class="p-2">
		<view class="p-2 bg-white rounded-lg">
			<view class="title">最近观看</view>
			<view class="flex justify-between items-center py-2 bg-white">
				<view v-for="(item, index) in list" :key="index" class="p-2 video-history-box" v-if="index <= 2">
					<image :src="item.thumb" class="video-img"></image>
					<view class="text-ellipsis">{{item.name}}</view>
				</view>
				<view class="video-history-box relative" v-if="list.length >= 3">
					<view class="wrap" :style="{backgroundImage: 'url(' + list[3].thumb + ')'}">
						<view class="wrap-mask">加载更多</view>
					</view>
					<view class="text-ellipsis visibility">{{list[3].name}}</view>
				</view>
			</view>
		</view>
		<view class="p-2 bg-white mt-2 rounded-lg">
			<view class="title mb-2">热播新剧</view>
			<view class="flex" v-for="(item,index) in list">
				<view>
					<image :src="item.thumb" class="video-img"></image>
				</view>
				<view class="flex flex-col justify-between py-6 px-2 flex-1">
					<view>
						{{item.name}}
					</view>
					<view class="flex justify-between items-center">
						<view>更新至16集</view> 
						<view><u-button text="立即播放" :plain="true" type="warning"></u-button></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name:"不牛战尊",
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					name:"豪门千金",
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
				}, {
					name:"智码毒牙",
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
				}, {
					name:"祖师爷三岁半",
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
				}]
			};
		}
	}
</script>

<style lang="scss">
.video-img{
	width: 160rpx;
	height: 260rpx;
}
.video-history-box{
	width: 150rpx;
}
.vide-overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 99999;
	opacity: 0.82;
	pointer-events: none;
}
.wrap{
    position: relative;
    -webkit-background-size: 100%;
    background-size: 100% 100%;
	height: 130px;
	width: 80px;
	border-radius: 20rpx;
}
.wrap-mask{
    height:100%;
    width:100%;
    background: #000000d4;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	border-radius: 20rpx;
}
</style>
